<template>
    <div class="default-main view-main">
        <Table ref="tableRef"></Table>
        <Dialog></Dialog>
    </div>
</template>

<script setup lang="ts">
import Table from '@/components/table/index.vue';
import Dialog from '@/views/admin/platform/dialog.vue';
import { provide, ref } from 'vue';
import { TableApi, TableState } from '@/components/table/table';
import { defaultOptButtons, TableRow } from '@/components/table/index';
import { PlatformTableDataState, PlatformTableDialogState } from '@/views/admin/platform/interface';

defineOptions({
    name: 'AdminPlatform',
});

const tableRef = ref();
const state = new TableState<PlatformTableDataState, PlatformTableDialogState>(
    new TableApi(
        new Map([
            ['page', '/api/web/platform/queryByPage'],
            ['add', '/api/web/platform/add'],
            ['delete', '/api/web/platform/delete'],
        ])
    ),
    {
        pk: ['file_id'],
        pagination: true,
        columns: [
            {
                type: 'selection',
                align: 'center',
                width: 55,
            },
            {
                prop: 'file_id',
                label: '文件ID',
                width: 180,
            },
            {
                prop: 'file_type',
                label: '文件类型',
            },
            {
                prop: 'app',
                label: '应用名',
                width: 120,
            },
            {
                prop: 'stream',
                label: '名称',
                width: 120,
            },
            {
                render: 'tag-state',
                prop: 'state',
                label: '状态',
                width: 100,
                getTagStateText: (row: TableRow) => {
                    if (row.state === 1) {
                        return '开启';
                    }
                    return '关闭';
                },
                getTagStateColor: (row: TableRow) => {
                    if (row.state === 1) {
                        return '#67c23a';
                    }
                    return '#909399';
                },
            },
            {
                show: false,
                prop: 'create_time',
                label: '创建时间',
                width: 220,
            },
            {
                render: 'buttons',
                label: '操作',
                align: 'center',
                width: 360,
                buttons: [
                    ...defaultOptButtons(['delete'], 'default'),
                ],
            },
        ],
        condition: {
            page_no: 1,
            page_size: 10,
        },
    },
    new PlatformTableDataState(),
    new PlatformTableDialogState(),
    {
        header: {
            title: '国标级联列表',
            buttons: ['refresh', 'add'],
        },
        form: {
            param_name: 'platform',
        },
    }
);

state.list();
// 绑定属性
provide('state', state);
</script>
